<template>
    <div class="login">
<van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="username"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <van-field
      v-model="password2"
      name="validator"
      label="二次密码"
      placeholder="确认密码"
      :rules="[{ validator, message: '请输入正确内容' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      注册
    </van-button>
  </div>
</van-form>
    </div>
</template>

<script>
import { ref } from 'vue';
import{ Toast } from 'vant'
import {fetchregister } from '@/API/goods.js'
import { useRouter } from 'vue-router';
export default {
  setup() {
    const username = ref('');
    const password = ref('');
    const password2 = ref('');
    const router = useRouter();
    const validator = (val) => password.value == val;
    const onSubmit =async (values) => {
      if(password.value !==password2.value){
           Toast("二次密码不正确")
           return;
      }
      let result = await fetchregister(values)
      if(result.status ==1){
          Toast(result.message)
      }else if(result.status == 0){
        console.log(result);
        router.replace("login")  
      }
    };

    return {
      username,
      password,
      password2,
      onSubmit,
      validator
    };
  },
};
</script>

<style lang="scss" scoped>
.login{
    margin-top: 0.5rem;
}
.btn{
    margin-top: 2rem;
    width: 13rem;
    margin: 0 auto;
}
</style>